“Astra” Documentation by “TeamXcel” v1.0

“Astra”

Created:01/11/2018
By: TeamXcel


Thank you for purchasing our landing page. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!

Table of Contents

  1. HTML Structure
  2. Template Components
  3. CSS Files and Structure
  4. JavaScript
  5. Sources and Credits
  6. PHP Code Explanation (If your theme uses PHP)
  7. Flash (If your theme uses Flash)
  8. API Usage (If your theme uses an API)
  9. Any additional unique features that need an overview

A) HTML Structure - top

Below is the general HTML structure of the landing page.

1) index.html File Structure - top

The landing page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Astra is a colofull app landing page template">
        <meta name="author" content="TeamXcel">
       
        <title>Astra | App Landing Page</title>
        
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
		
		<!-- Font Awesome CSS -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <!-- Elegant Font Icons CSS -->
        <link rel="stylesheet" href="css/elegant-font-icons.css">
        <!-- Elegant Line Icons CSS -->
        <link rel="stylesheet" href="css/elegant-line-icons.css">
		<!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Slicknav CSS -->
        <link rel="stylesheet" href="css/slicknav.min.css">
        <!-- animate CSS -->
        <link rel="stylesheet" href="css/animate.min.css">
		<!-- OWL-Carousel CSS -->
        <link rel="stylesheet" href="css/owl.carousel.css">
        <!-- Swiper CSS -->
        <link rel="stylesheet" href="css/swiper.min.css">
		<!-- Main CSS -->
        <link rel="stylesheet" href="css/main.css">
		<!-- Responsive CSS -->
        <link rel="stylesheet" href="css/responsive.css">

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    </head>
    <body data-spy="scroll" data-target="#navmenu" data-offset="70">
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <div id='preloader' >
            <div class='loader' >
                <div class="battery"></div>
            </div>
        </div><!-- Preloader -->
        
        <header id="header" class="header-section">
            
		</header> <!-- Header Section -->  
		
		<section id="home" class="hero-section">
		    
		</section><!-- Hero Section -->
		
        <section id="features" class="feature-section bd-bottom padding">
            
        </section><!-- Feature Section -->
        
        <section class="content-section bg-grey bd-bottom padding">
            
        </section><!-- Content Section -->
        
        <section id="works" class="how-it-works-section bd-bottom padding">
            
        </section><!-- How It Works Section -->        		  		  
        
		<section id="screenshots" class="screenshots-section bd-bottom bg-grey padding">
		    
		</section><!-- Screenshots Section -->
		
		<section id="team" class="team-section bd-bottom padding">
		    
		</section><!-- Team Section -->
		
		<section id="reviews" class="review-section bg-gradiant padding">
           
        </section><!-- Reviews Section -->

		<section id="pricing" class="pricing-section bd-bottom bg-grey padding">
		    
		</section><!-- Pricing Section -->
        
        <section id="blog" class="blog-section padding">
           
        </section><!-- Blog Section -->
        
        <section id="download" class="download-section padding">
           
        </section><!-- Download Section -->
        
        <section id="subscribe" class="subscribe-section">
            
        </section><!-- Subscribe Section -->
		    
		<footer class="footer-section align-center">
			
		</footer><!-- /.footer_section -->

		<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_carrot-up"></i></a>
	
		<!-- jQuery Lib -->
		<script src="js/vendor/jquery-1.12.4.min.js"></script>
		<!-- Tether JS -->
		<script src="js/vendor/tether.min.js"></script>
		<!-- Bootstrap JS -->
		<script src="js/vendor/bootstrap.min.js"></script>
		<!-- Slicknav JS -->
		<script src="js/vendor/jquery.slicknav.min.js"></script>
		<!-- OWL-Carousel JS -->
		<script src="js/vendor/owl.carousel.min.js"></script>
		<!-- Swiper JS -->
		<script src="js/vendor/swiper.min.js"></script>
		<!-- Smooth Scroll JS -->
		<script src="js/vendor/smooth-scroll.min.js"></script>
		<!-- Ajaxchimp JS -->
		<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
		<!-- Wow JS -->
		<script src="js/vendor/wow.min.js"></script>
		<!-- Main JS -->
		<script src="js/main.js"></script>

    </body>
</html>

B) Template Components - top

The site is made of many sections like header, slider, testimonials, services and more...

1) Header Section - top

<header id="header" class="header-section">
	<div class="container">
		<nav class="navbar">
			<a href="#" class="navbar-brand"><img src="img/logo.png" alt="Astra"></a>
			<div class="d-flex menu-wrap">
			   <div id="navmenu" class="mainmenu">
				   <ul class="nav">
						<li ><a data-scroll class="nav-link active" href="#home">Home <span class="sr-only">(current)</span></a></li>
						<li><a data-scroll class="nav-link" href="#features">Features</a></li>
					</ul>
			   </div>
			</div>
		</nav>
	</div>
</header> <!-- Header Section -->

2) Hero Section - top


<section id="home" class="hero-section">
	<div class="container">
		<div class="hero-inner text-center">
			<div class="hero-content">
				<h1>Make your app <br> business easy with Astra</h1>
				<p>Astra is better way to promote your startup mobile app.</p>
				<div class="hero-btn">
					<a href="#" class="download-btn"><img src="img/appstore.png" alt="btn"></a>
					<a href="#" class="download-btn"><img src="img/playstore.png" alt="btn"></a>
				</div>
			</div>
		</div>
	</div>
</section><!-- Hero Section -->

3) Feature Section - top


<section id="features" class="feature-section bd-bottom padding">
	<div class="container">
		<div class="feature-mock"></div>
		<div class="row feature-wrap">
			<div class="col-sm-4 text-right">
				<div class="feature-content wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1000ms">
					<div class="icon"><i class="icon-layers"></i></div>
					<h3>Great Interface</h3>
					<p>Lorem Ipsum is simply text of the printing and typesetting industry.It has centuries.</p>
				</div>
			</div>
			<div class="col-sm-4 offset-sm-4">
				<div class="feature-content wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1000ms">
					<div class="icon"><i class="icon-adjustments"></i></div>
					<h3>Easy To Custimize</h3>
					<p>Lorem Ipsum is simply text of the printing and typesetting industry.It has centuries.</p>
				</div>
			</div>
		</div>
		<div class="row sponsor-wrap mt-30 text-center">
			<div class="col-md-10 offset-md-1">
				<ul class="sponsors">
				   <li><img src="img/sponsor-1.png" alt="sponsor"></li>
				</ul>
			</div>
		</div>
	</div>
</section><!-- Feature Section -->

3) Content Section - top


<section class="content-section bg-grey bd-bottom padding">
	<div class="container">
		<div class="row content-wrap">
			<div class="col-md-6 xs-padding wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1000ms">
				<div class="content-details">
					<h2>Easy To Use Friendly Interface.</h2>
					<p class="mb-30">Lorem Ipsum is simply text of the printing and typesetting industry.It has survived not only five centuries.No one cares about products. people care about ideas. Lorem Ipsum is simply text of the printing and typesetting industry.It has survived not only five centuries.</p>
					<a href="#" class="default-btn">Purchase App</a>
				</div>
			</div>
			<div class="col-md-6 xs-padding wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1000ms">
				<img src="img/content-bg.png" alt="img">
			</div>
		</div>
	</div>
</section><!-- Content Section -->

4) How It Works Section - top


<section id="works" class="how-it-works-section bd-bottom padding">
	<div class="container">
		<div class="how-wrap row">
			<div class="col-md-4 col-sm-6 xs-padding wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
				<div class="how-content text-center">
					<i class="icon-anchor"></i>
					<h3>Connect Device</h3>
					<p>Astra is better way to promote your <br>startup mobile app.</p>
				</div>
				<div class="arrow"></div>
			</div><!-- Item-1 -->
		</div>
	</div>
</section><!-- How It Works Section -->

5) Screenshots Section - top


<section id="screenshots" class="screenshots-section bg-grey padding">
	<div class="container">
		<div class="section-heading mb-60 text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
			<h2>Screenshots</h2>
			<p>Is amazing, modern and clean landing page for showcase <br> your app anything else.</p>
		</div>
		 <div class="swiper-container">
			<div class="mobile-mock">
				<div class="screen"></div>
				<div class="circle"></div>
			</div>
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img class="w-100" src="img/screenshot-1.jpg" alt="screenshot">
				</div>
			</div>
			<!-- Carousel Arrows -->
			<div class="swiper-next"><i class=" arrow_carrot-right"></i></div>
			<div class="swiper-prev"><i class=" arrow_carrot-left"></i></div>
		</div>
	</div>
</section><!-- Screenshots Section -->

5) Team Section - top


<section id="team" class="team-section bd-bottom padding">
	<div class="container">
		<div class="section-heading mb-60 text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
			<h2>Developers</h2>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>It has survived not only five centuries.</p>
		</div>
		<div class="row">
			<div class="col-md-3 col-sm-6 xs-padding wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
				<div class="team-box text-center">
					<div class="team-thumb">
						<img src="img/team-1.jpg" alt="img">
					</div>
					<div class="team-content">
						<h3>Michel Brown</h3>
						<span>Designer</span>
					</div>
				</div>
			</div><!-- Team-1 -->
		</div>
	</div>
</section><!-- Team Section -->

5) Review Section - top


<section id="reviews" class="review-section bg-gradiant padding">
	<div class="container">
		<div class="section-heading mb-60 text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
			<h2>User Reviws</h2>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>It has survived not only five centuries.</p>
		</div>
		<div id="review-carousel" class="review-carousel owl-carousel">
			<div class="review-item">
				<div class="review-thumb">
				   <img src="img/team-1.jpg" alt="thumb">
				</div>
				<div class="review-content">
					<h3>Michel Brown</h3>
					<ul class="rattings">
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
					</ul>
					<div class="review-text">
						<p>"There are design companies, and then there are user experience design interface design. navato is the best choice for app developers"</p>
					</div>
				</div>
			</div><!-- Reviews-1 -->
		</div>
	</div>
</section><!-- Reviews Section -->

6) Pricing Section - top


<section id="pricing" class="pricing-section bd-bottom bg-grey padding">
	<div class="container">
		<div class="section-heading mb-60 text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
			<h2>Plans & Pricing</h2>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>It has survived not only five centuries.</p>
		</div>
		<div class="row pricing-wrap">
			<div class="col-md-4 col-sm-6 sm-padding wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
				<div class="pricing-box text-center">
					<div class="pricing-head">
						<i class="icon-layers"></i>
						<h3>Basic</h3>
						<h2><div>$39</div><span>month</span></h2>
					</div>
					<ul class="pricing-info">
						<li>6 GB storage</li>
					</ul>
					<a href="#" class="pricing-btn">Signup Now</a>
				</div>
			</div><!-- Pricing 1 -->
		</div>
	</div>
</section><!-- Pricing Section -->

7) Blog Section - top


<section id="blog" class="blog-section padding">
	<div class="container">
		<div class="section-heading mb-60 text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
			<h2>Latest Stories</h2>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>It has survived not only five centuries.</p>
		</div>
		<div class="row">
			<div class="col-md-4 col-sm-6 xs-padding  wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
				<div class="blog-box">
					<div class="blog-thumb">
					   <img src="img/blog-1.jpg" alt="img">
					   <div class="post-meta">
							<div>
							   <span><i class="fa fa-user"></i>By: Admin</span>
								<span><i class="fa fa-calendar"></i>Jan 01, 2018</span>
							</div>
						</div>
					</div>
					<div class="blog-content">
						<h3><a href="#">No one cares about products. people care about ideas.</a></h3>
						<p>Lorem Ipsum is simply text of the printing and typesetting industry.It has survived not only five centuries.</p>
						<a href="#" class="read-more">Read More</a>
					</div>
				</div>
			</div><!-- Post-1 -->
		</div>
	</div>
</section><!-- Blog Section -->

8) Download Section - top


<section id="download" class="download-section padding">
	<div class="container">
		<div class="download-content text-center">
			<h2 class="wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">Download Astra Today</h2>
			<p class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1000ms">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>It has survived not only five centuries.</p>
			<div class="hero-btn wow fadeInUp" data-wow-delay="400ms" data-wow-duration="1000ms">
				<a href="#" class="download-btn"><img src="img/appstore.png" alt="btn"></a>
				<a href="#" class="download-btn"><img src="img/playstore.png" alt="btn"></a>
			</div>
		</div>
	</div>
</section><!-- Download Section -->

9) Subscribe Section - top


<section id="subscribe" class="subscribe-section">
	<div class="container">
	   <div class="section-heading mb-40 text-center wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
			<h2>Subscribe Newslatters</h2>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>It has survived not only five centuries.</p>
		</div>
		<div class="subscribe-wrap">
			<form action="#" class="subscribe-form">
				<input type="email" name="email" id="subs-email" class="form-input" placeholder="Enter Your Email Address...">
				<button type="submit" class="submit">Subscribe</button>
				<div id="subscribe-result">
					<p class="subscription-success"></p>
					<p class="subscription-error"></p>
				</div>
			</form>
		</div>
		<div class="clearfix"></div>
		<ul class="social-share text-center">
			 <li><a href="#"><i class="fa fa-facebook"></i></a></li>
		</ul><!-- /.social_link -->
	</div>
</section><!-- Subscribe Section -->

10) Footer Section - top


<footer class="footer-section align-center">
	<div class="container">
		<p>© 2018 Astra Powered by TeamXcel</p>
	</div>
</footer><!-- /.footer_section -->

 

C) CSS Files and Structure - top

These are the css files:

  1. bootstrap.min.css
  2. animate.min.css
  3. elegant-font-icons.css
  4. elegant-line-icons.css
  5. owl.carousel.css
  6. main.css
  7. responsive.css

 

D) JavaScript - top

This theme use these Javascript files:

  1. jQuery
    jQuery is a Javascript library that greatly reduces the amount of code that you must write. jQuery use these javascript files: 
                	bootstrap.min.js
                smooth-scroll.min.js
                owl.carousel.min.js
                jquery.ajaxchimp.min.js
                jquery-1.12.4.min.js
                jquery.mb.YTPlayer.min.js
                owl.carousel.min.js
                venobox.min.js
                wow.min.js
                jquery.counterup.min.js
                main.js
    You can edit the contact.js files. for setting contact form

F) Sources and Credits - top

  1. Bootstrap 3.3
  2. OWL Carousel
  3. WOW JS
  4. VenoBox
  5. Smooth Scroll
  6. YTPlayer
  7. AjaxChimp

G) PHP Code Explanation - top

There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

TeamXcel

Go To Table of Contents